<template>
  <div class="welcome-container">
    <!-- 顶部导航栏保持不变 -->
    <div class="welcome-navbar">
      <div class="navbar-logo">
        <img src="@/assets/airline-logo.png" alt="TEAM04航空">
        <span>天津滨海机场航班管理系统</span>
      </div>
    </div>

    <!-- 调整后的主要内容区 -->
    <div class="welcome-content">
      <div class="welcome-left">
        <h1 class="welcome-title">天津滨海国际机场<br>航班管理平台</h1>

        <div class="welcome-subtitle">
          高效、智能的航班运营管理解决方案
        </div>
        <div class="company-info">
          <h3><span class="info-icon">✈</span> 公司简介</h3>
          <div class="info-content">
            <p>天津滨海国际机场（Tianjin Binhai International Airport，IATA：TSN，ICAO：ZBTJ）是中国北方重要的航空枢纽，始建于1939年，2002年完成扩建。</p>
            <p>机场位于中国天津市东丽区新立街道、金桥街道，西距天津市中心约13千米，为4E级国际机场、区域性航空货运枢纽。</p>
            <p>目前拥有T1、T2两座航站楼，总面积达36.4万平方米，跑道长度3200米，可满足年旅客吞吐量3000万人次的需求。</p>
          </div>
        </div>

        <div class="action-buttons">
          <el-button type="primary" size="large" @click="navigateToLogin" class="login-btn">
            <i class="el-icon-user"></i> 立即登录
          </el-button>
          <el-button size="large" @click="navigateToDemo" v-if="showDemoButton" class="demo-btn">
            <i class="el-icon-view"></i> 系统演示
          </el-button>
        </div>
      </div>

      <div class="welcome-right">
        <div class="image-container">
          <img src="@/assets/airport-view.png" alt="机场全景" class="airport-image">
        </div>
      </div>
    </div>

    <!-- 页脚 -->
    <div class="welcome-footer">
      <div class="footer-content">
        <p>©2025 天津滨海机场 版权所有</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const showDemoButton = ref(process.env.NODE_ENV === 'development')

const navigateToLogin = () => {
  router.push('/login')
}

const navigateToDemo = () => {
  localStorage.removeItem('token')
  router.push('/home/dashboard?demo=true')
}
</script>

<style scoped>
.welcome-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f8fafc;
  font-family: 'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

/* 导航栏保持不变 */
.welcome-navbar {
  height: 60px;
  background: linear-gradient(135deg, #1e5799 0%, #2989d8 100%);
  padding: 0 40px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.navbar-logo {
  display: flex;
  align-items: center;
}

.navbar-logo img {
  height: 40px;
  margin-right: 15px;
}

.navbar-logo span {
  color: white;
  font-size: 20px;
  font-weight: bold;
}

/* 调整主要内容区 */
.welcome-content {
  flex: 1;
  display: flex;
  padding: 40px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  align-items: center;
  gap: 40px;
}

.welcome-left {
  flex: 1.2;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.welcome-title {
  font-size: 36px;
  color: #1a3e72;
  margin-bottom: 15px;
  line-height: 1.3;
  font-weight: 600;
}

.welcome-subtitle {
  font-size: 18px;
  color: #4a6b9d;
  margin-bottom: 30px;
  font-weight: 400;
}

.company-info {
  margin-bottom: 30px;
}

.company-info h3 {
  font-size: 22px;
  color: #1a3e72;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  font-weight: 600;
}

.info-icon {
  margin-right: 10px;
  font-size: 20px;
}

.info-content p {
  font-size: 15px;
  line-height: 1.8;
  color: #555;
  margin-bottom: 12px;
}

.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 30px 0;
}

.feature-item {
  background: white;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
}

.feature-item:hover {
  transform: translateY(-5px);
}

.feature-item i {
  font-size: 28px;
  color: #2989d8;
  margin-bottom: 10px;
}

.feature-item h4 {
  font-size: 16px;
  color: #333;
  margin-bottom: 8px;
}

.feature-item p {
  font-size: 14px;
  color: #666;
}

.action-buttons {
  display: flex;
  gap: 15px;
  margin-top: 20px;
}

.action-buttons .el-button {
  padding: 12px 30px;
  font-size: 15px;
  font-weight: 500;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.login-btn {
  background: #2989d8;
  border: none;
}

.login-btn:hover {
  background: #1e5799;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(41, 137, 216, 0.3);
}

.demo-btn {
  border: 1px solid #2989d8;
  color: #2989d8;
}

.demo-btn:hover {
  background-color: rgba(41, 137, 216, 0.1);
  transform: translateY(-2px);
}

.welcome-right {
  flex: 0.8;
  display: flex;
  align-items: center;
}

.image-container {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  max-width: 100%;
}

.airport-image {
  width: 100%;
  height: auto;
  display: block;
  max-height: 400px;
  object-fit: cover;
}

/* 页脚 */
.welcome-footer {
  padding: 20px 0;
  background: #1a3e72;
  color: white;
  text-align: center;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;

  justify-content: space-between;
  align-items: center;
  padding: 0 40px;
}

.footer-links {
  display: flex;
  gap: 20px;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: color 0.3s ease;
  font-size: 14px;
}

.footer-links a:hover {
  color: white;
}

@media (max-width: 992px) {
  .welcome-content {
    flex-direction: column;
    padding: 30px 20px;
    gap: 30px;
  }

  .welcome-left, .welcome-right {
    width: 100%;
  }

  .welcome-title {
    font-size: 32px;
  }

  .features {
    grid-template-columns: 1fr;
  }

  .action-buttons {
    justify-content: center;
  }

  .airport-image {
    max-height: 300px;
  }
}
</style>
